<template>
  <div>
    <p class="title">新建banner</p>
    <el-form :model="form" label-width="120px">
      <el-form-item label="位置：">
        <el-select v-model="form.positions" placeholder="请选择" size="small">
          <el-option v-for="item in options1" :key="item.value" :label="item.label" :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="类型：">
        <el-select v-model="form.banType" placeholder="请选择" size="small">
          <el-option v-for="item in options2" :key="item.value" :label="item.label" :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="banner名称">
        <el-input v-model="form.title" size="small"></el-input>
      </el-form-item>
      <el-form-item label="排序：">
        <el-input v-model="form.orders" size="small"></el-input>
      </el-form-item>
      <el-form-item>
        <el-upload action="https://jsonplaceholder.typicode.com/posts/" list-type="picture-card"
          :on-preview="handlePictureCardPreview">
          <i class="el-icon-plus"></i>
        </el-upload>
      </el-form-item>
      <el-form-item label="状态：">
        <el-radio-group v-model="form.state">
          <el-radio :label="1">上架</el-radio>
          <el-radio :label="2">下架</el-radio>
        </el-radio-group>
      </el-form-item>

      <el-form-item label="">
        <RichText />
      </el-form-item>

    </el-form>

    <div class="btn2">
      <el-button type="primary">取消</el-button>
      <el-button type="primary" @click="addBanner">保存</el-button>
    </div>
  </div>
</template>

<script>
  import RichText from "../../components/RichText.vue";
  import banner from "@/apis/modules/banner";
  export default {
    components: {
      RichText,
    },
    data() {
      return {
        form: {
          positions: "",//位置 1 首页-发现、2 首页-广播、3 活动
          banType: "",//类型 1 链接、2 广播、3 活动 4 富文本
          title: "",//banner名称
          cover: "",//封面
          state: "",//状态 1 上架 2 下架
          content: "",//内容
          orders: "",//排序
        },
        value1: "",
        value2: "",
        input2: "",
        imageUrl: "",
        radio: "1",
        options1: [
          {
            value: "1",
            label: "首页-发现",
          },
          {
            value: "2",
            label: "首页-广播",
          },
          {
            value: "3",
            label: "活动",
          },
        ],
        options2: [

          {
            value: "1",
            label: "链接",
          },
          {
            value: "2",
            label: "广播",
          },
          {
            value: "3",
            label: "活动",
          }, {
            value: "4",
            label: "富文本",
          },
        ],
      };
    },
    methods: {
      handleAvatarSuccess(res, file) {
        this.imageUrl = URL.createObjectURL(file.raw);
      },
      beforeAvatarUpload(file) {
        const isJPG = file.type === "image/jpeg";
        const isLt2M = file.size / 1024 / 1024 < 2;

        if (!isJPG) {
          this.$message.error("上传头像图片只能是 JPG 格式!");
        }
        if (!isLt2M) {
          this.$message.error("上传头像图片大小不能超过 2MB!");
        }
        return isJPG && isLt2M;
      },
      async addBanner() {
        const { code, data, msg } = await banner.addBanner(this.form)
        if (code == 200) {
          this.$router.push('/Home/Banner')
        }
      },
    },
  };
</script>

<style lang="scss" scoped>
  .title {
    margin-bottom: 32px;
  }

  .el-input,
  .el-select {
    width: 300px;
  }
</style>
